<template>
    <div>
        <my-nav-bar
            title="layout"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <div class="layout-content">
            <h2 class="title">基础用法</h2>
            <my-row>
                <my-col class="col" span="8">
                    <div>span8</div>
                </my-col>
                <my-col class="col" span="8">
                    <div>span8</div>
                </my-col>
                <my-col class="col" span="8">
                    <div>span8</div>
                </my-col>
            </my-row>
            <h2 class="title">带有间距</h2>
            <my-row gutter="16">
                <my-col class="col" span="8">
                    <div>span8</div>
                </my-col>
                <my-col class="col" span="8">
                    <div>span8</div>
                </my-col>
                <my-col class="col" span="8">
                    <div>span8</div>
                </my-col>
            </my-row>
            <h2 class="title">flex布局</h2>
            <my-row type="flex">
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
            </my-row>
            <h2 class="title">justify: center</h2>
            <my-row type="flex" justify="center">
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
            </my-row>
            <h2 class="title">justify: end</h2>
            <my-row type="flex" justify="end">
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
            </my-row>
            <h2 class="title">justify: space-between</h2>
            <my-row type="flex" justify="space-between">
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
            </my-row>
            <h2 class="title">justify: space-around</h2>
            <my-row type="flex" justify="space-around">
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
            </my-row>
            <h2 class="title">offset偏移</h2>
            <my-row>
                <my-col class="col" span="6">
                    <div>span6</div>
                </my-col>
                <my-col class="col" span="8" offset="6">
                    <div>span8 offset6</div>
                </my-col>
            </my-row>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },

    onClickRight() {
      console.log("right");
    },
  }
};
</script>

<style lang="less" scoped>
.layout-content {
  width: 100%;
}

.col {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  &:nth-child(odd) {
    div {
      background: #267aff;
    }
  }
  &:nth-child(even) {
    div {
      background: #f56c6c;
    }
  }
}
</style>
